<template>
    <a-layout >
        <a-layout-content class="myhotelDetail">
            <div class="hotelDetailCard">
                <a-card id="left-card">
                    <div class="information">
                        <span class="data" style="font-size: x-large; font-weight: bold">
                            {{currentHotelInfo.name}}
                        </span>
                        <span class="data">地址：{{ currentHotelInfo.address }}</span>
                        <span class="data">评分：{{ currentHotelInfo.rate }} </span>
                        <span class="data">星级：
                        <a-rate :value="currentHotelInfo.rate" disabled allowHalf/></span>
                        <span class="data"
                              style="max-height:70px; overflow-y:scroll;"
                        >酒店简介：{{ currentHotelInfo.description }} </span>
                        <!--                              style="overflow: hidden; -webkit-line-clamp: 2; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;"-->

                    </div>
                    <a-card-grid class="grid" >
                        <img style="object-fit: cover; width: 100%; height: 100%" :src=" hotelpic.pic?'data:image/png;base64,'+hotelpic.pic:'https://s1.ax1x.com/2020/06/26/NrCeVf.jpg'">
                    </a-card-grid>
                </a-card>
                <div class="roomInfo">
                    <a-tabs id="tabs">
                    <a-tab-pane key="1">
                             <span slot="tab">
                              <a-icon type="align-left" />
                                 房间信息
                            </span>
                        <RoomList
                                style=""
                                :rooms="currentHotelInfo.rooms"></RoomList>
                    </a-tab-pane>
                    <a-tab-pane key="3">
                            <span slot="tab">
                              <a-icon type="solution" />
                                 用户评价
                            </span>
                        <user-review ></user-review>
                    </a-tab-pane>
                </a-tabs>
                </div>
            </div>
        </a-layout-content>
    </a-layout>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import RoomList from './components/roomList'
import userReview from "./components/userReview";

export default {
    name: 'hotelDetail',
    components: {
        RoomList,
        userReview,
    },
    data() {
        return {

        }
    },
    computed: {
        ...mapGetters([
            'currentHotelInfo',
            'mockuserComment',
            'hotelpic'
        ])
    },
    mounted() {
        this.set_currentHotelId(Number(this.$route.params.hotelId))
        this.getHotelById()
        this.getUserComment(Number(this.$route.params.hotelId))
        this.getUserInfo(),
        this.gethotelpic(Number(this.$route.params.hotelId))

    },
    beforeRouteUpdate(to, from, next) {
        this.set_currentHotelId(Number(to.params.hotelId))
        this.getHotelById()
        // this.mockgetUserComment()
        next()
    },
    methods: {
        ...mapMutations([
            'set_currentHotelId',
        ]),
        ...mapActions([
            'getHotelById',
            'getUserComment',
            'getUserInfo',
            'gethotelpic'
        ])
    }
}
</script>
<style scoped lang="less">

    .hotelDetailCard{
        position: relative;
        min-height: 660px;
        z-index: 1;
        padding: 20px;
        margin-top: 20px;
        margin-bottom: 30px;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
    .grid {
        width:100%;
        height: 220px;
    }
    #tabs{
        padding: 15px;
    }

    #left-card{
        float: left;
        z-index: 2;
        margin-top: 10px;
        display: inline-block;
        width: 30%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .information{
        padding: 20px;
    }
    .data{
        display: block;
        padding: 5px;
    }

    .roomInfo{
        display: inline-grid;
        position: relative;
        margin-top: 10px;
        margin-left: 55px;
        width: 60%;
        /*padding: 20px ;*/
        border: 1px solid #d9d9d9;
        background: rgba(249, 249, 255, 0.73);
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
    }
    .myhotelDetail{
        padding-left: 100px;
        padding-right: 100px;
    }
    .hotelDetailCard {
        padding: 50px 50px;
    }
    .hotel-info {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        .info{
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            .items {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                .label{
                    margin-right: 10px;
                    font-size: 18px;
                }
                .value {
                    margin-right: 15px
                }
            }
        }
    }
</style>
